@import '~@/assets/style/variable'

.menu
  transition width $animationTime
  color #fff
  display flex
  float left
  width $menuWidth
  height 'calc(100vh - %s)' % ($headerHeight)
  background-color #383e4b
  flex-wrap wrap
  justify-content center
  align-items flex-start
  align-content flex-start
:global
  :local(.menu)
    &.stretch
      width $menuStretchWidth
    > *
      flex-shrink 0
    > input
      transition width $animationTime
      overflow hidden
      color #fff
      outline none
      margin-top 15px
      margin-bottom 10px
      border 0
      text-align center
      height 40px
      font-size 20px
      background-color #2d323d
      width 'calc(%s - 30px)' % ($menuWidth)
      margin-left 0
      margin-right 0
      &.stretch
        width 40px
    > ul 
      width 100%
      list-style none
      padding-left 0
      > li 
        width 100%
        display block
        > a
          overflow hidden
          padding-left 15px
          display flex
          align-items center
          widows 100%
          height 40px
          font-size 14px
          line-height 40px
          text-decoration none
          color #fff
          transition background-color $animationTime
          &:hover
            background-color #2d323d
          > svg
            width 20px
            height 20px
            margin-right 15px
